<template>
	<view class="goods-item">
		<view class="goods-item-left">
			<image :src="baseUrl + goods.goodsimage" class="goods-pic"></image>
		</view>
		<view class="goods-item-right">
			<view class="goods-name">
				<view>{{ goods.goods_name }}</view>
				<view>X{{ goods.number }}</view>
			</view>
			<view class="goods-details">
				<view>购买数量{{ goods.number }} | 赠品数量{{ goods.giftnumber }}</view>
			</view>

			<view class="goods-price">￥{{ goods.moneys }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		goods: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			baseUrl: uni.$http.baseUrl
		};
	}
}
</script>

<style lang="scss">
.goods-item {
	display: flex;
	width: 100%;
	// margin-bottom: 24rpx;
	// margin-left: 32rpx;
	padding: 28rpx 0;
	// 设置盒模型为 border-box
	box-sizing: border-box;

	.goods-item-left {
		margin-right: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.goods-pic {
			width: 100px;
			height: 100px;
			display: block;
		}
	}

	.goods-item-right {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;

		.goods-name {
			font-size: 17px;
			display: flex;
			justify-content: space-between;

			:last-child {
				font-size: 14px;
			}
		}

		.goods-details {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #B7BDC4;
		}

		.goods-price {
			font-size: 28rpx;

			text {
				font-size: 32rpx;
				font-weight: 700;
			}
		}
	}
}
</style>